<template>
  <div>
    <div class="top" @click="back">
      <span>返回首页</span>
    </div>
    <!-- 顶部导航 -->
    <van-tabs v-model="active" @click="onClick" class="box">
      <van-tab
        v-for="(item, index) in listArr"
        :key="index"
        :title="item.name"
      ></van-tab>
    </van-tabs>
    <!-- 商品列表 -->
    <div>
      <h3>{{ obj.text1 }}</h3>
      <p>{{ obj.text2 }}</p>
      <ul>
        <li v-for="(item, index) in listBrr" :key="index" @click="about(item.id)" >
          <img :src="item.list_pic_url" alt=""  />
          <p>
            {{ item.name }}
          </p>
          <span>
            {{ item.retail_price | RMBformat }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetSearchData, Getgory,GetDetail,GetRelated } from "../https/http";
import { mapMutations } from "vuex";
export default {
  name: "Banner",
  methods: {
    about(num){
      this.$router.push({name:"About",params:{id:num,index:this.index2}})
    },
    onClick(name) {
      // console.log(name, title);
      this.index = this.listArr[name].id;
      this.index2 = this.index
      GetSearchData({
        categoryId: this.index,
        page: 1,
        size: 100,
      }).then((res) => {
        console.log(res); //获取导航点击相关数据
        this.listBrr = res.data.data;
      });

      Getgory({ id: this.index }).then((res) => {
        // console.log(res.data.currentCategory);  //点击后获取列表标题数据
        this.obj.text1 = res.data.currentCategory.name;
        this.obj.text2 = res.data.currentCategory.front_name;
      });
    },
    back(){
      this.chanGe()
      this.$router.push({name:"Home"})
    },
    ...mapMutations(["chanGe"])
  },
  data() {
    return {
      active: 0, //顶部导航默认选中索引值
      listArr: [], //顶部导航数组
      listBrr: [], //展示数据数组
      index: 0,
      obj: {
        text1: 1,
        text2: 2,
      },
      index2:this.$route.params.index
    };
  },
  created() {
    // console.log(111, this.$route.params.data); //子组件单击发送请求传过来的值
    this.obj.text1 = this.$route.params.data.currentCategory.name; //加载显示的商品列表标题
    this.obj.text2 = this.$route.params.data.currentCategory.front_name; //加载显示的商品列表标题
    this.listArr = this.$route.params.data.brotherCategory; //顶部导航
    this.index = this.$route.params.data.currentCategory.id; //点击过来的id
    console.log(this.$route.params.index);
    this.listArr.forEach((item, index) => {
      if (item.id === this.index) {
        this.active = index; //处理组件选中哪一个的样式
      }
    });
    // 根据点进来的商品id获取商品列表
    GetSearchData({
      categoryId: this.index,
      page: 1,
      size: 100,
    }).then((res) => {
      // console.log(222, res);
      this.listBrr = res.data.data; //商品列表数组
    });
  },

};
</script>

<style scoped lang="less">
.top{
  width: 100%;
  height: 34.987px;
  position: fixed;
  z-index: 10;
  background: #f0f0f1;
  top:0px;
  span{
    text-align: center;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 15px;
  }
}
h3 {
  margin-top: 15px;
  display: block;
  text-align: center;
  font-size: 19px;
}
p {
  text-align: center;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 100;
}
ul {
  // display: flex;
  li {
    display: block;
    // margin:0px 5% 0px 5%;
    width: 50%;
    height: 260px;
    // background: blueviolet;
    float: left;
    position: relative;
    img {
      // width: 100%;
      // height: 100%;
      width: 174px;
      height: 174px;
    }
    p {
      text-align: center;
      font-size: 17px;
    }
    span {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: red;
      margin-top: 13px;
    }
  }
}
.box{
  margin-top: 34.987px;
}
</style>